<template>
  <div class="countdown">
    <div class="c-pb80 c-fs28 c-fc-sblack">测试即将开始</div>
    <div class="c-hh170 c-flex-row c-flex-center">
      <div :class="[oneClassIn ? 'in':'',oneHide ? 'hide' : '']" class="countdown-circle c-flex-row c-flex-center">
        <span>3</span>
      </div>
      <div :class="[twoClassIn ? 'in':'',twoHide ? 'hide' : '']" class="countdown-circle c-flex-row c-flex-center">
        <span>2</span>
      </div>
      <div :class="[threeClassIn ? 'in':'',threeHide ? 'hide' : '']" class="countdown-circle c-flex-row c-flex-center">
        <span>1</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CountdownVoice",
  props: {
    countdownTime: {
      //绑定的输入框的值
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      oneClassIn: false,
      oneHide: true,
      twoClassIn: false,
      twoHide: true,
      threeClassIn: false,
      threeHide: true,
      startClassIn: false,
      startClassOut: false
    };
  },
  mounted() {
    this.startCount();
  },
  methods: {
    startCount() {
      let count = 0;
      this.oneClassIn = true;
      this.oneHide = false;
      this.twoClassIn = false;
      this.twoHide = true;
      this.threeClassIn = false;
      this.threeHide = true;
      let jishu = setInterval(() => {
        count++;
        switch (count) {
          case 1:
            this.oneHide = true;
            this.twoHide = false;
            this.oneClassIn = false;
            this.twoClassIn = true;
            break;
          case 2:
            this.twoHide = true;
            this.threeHide = false;
            this.twoClassIn = false;
            this.threeClassIn = true;
            break;
          case 3:
            count = 0;
            this.oneClassIn = false;
            this.oneHide = true;
            this.twoClassIn = false;
            this.twoHide = true;
            this.threeClassIn = false;
            this.threeHide = true;
            this.$emit("hideCountdown");
            clearInterval(jishu);
            break;
          default:
            break;
        }
      }, 800);
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.countdown {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  /* margin-top: -1.5rem; */
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.countdown-circle {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgba(115,144,254,1);;
  margin: 0 auto;
  text-align: center;
}
.countdown-circle span {
  font-size: 1.4rem;
  color: #fff;
}
.hide {
  display: none;
}
.show {
  display: block;
}

.in {
  animation: zoomIn 0.5s ease-in-out;
  -webkit-animation: zoomIn 0.5s ease-in-out;
}
.out {
  animation: goOut 0.5s ease-in-out;
  -webkit-animation: goOut 0.5s ease-in-out;
}
@keyframes zoomIn {
  0% {
    width: 1.2rem;
    height: 1.2rem;
  }
  100% {
    width: 4rem;
    height: 4rem;
  }
}
@keyframes zoomOut {
  0% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%) rotate(-120deg);
    -webkit-transform: translate(-50%) rotate(-120deg);
  }
}
@-webkit-keyframes zoomIn {
  0% {
    width: 1.2rem;
    height: 1.2rem;
  }
  100% {
    width: 4rem;
    height: 4rem;
  }
}
@-webkit-keyframes goOut {
  0%,
  30% {
    transform: translate(-50%) rotate(0deg);
    -webkit-transform: translate(-50%) rotate(0deg);
  }

  60% {
    transform: translate(-50%) rotate(20deg);
    -webkit-transform: translate(-50%) rotate(20deg);
  }

  100% {
    transform: translate(-50%) rotate(-120deg);
    -webkit-transform: translate(-50%) rotate(-120deg);
  }
}
</style>
